<template>
  <div id="NavBar">
    <div class="ul">
      <router-link tag="div" to='/Home'>
        <div class="iconfont icon-homepage_fill"></div>
        <span>首页</span>
      </router-link>
      <router-link tag="div" to='/ChiCang'>
        <div class="iconfont icon-caigou"></div>
        <span>持仓</span>
      </router-link>
      <router-link tag="div" to='/GongGao'>
        <div class="iconfont icon-gantanhao-yuankuang"></div>
        <span>公告</span>
      </router-link>
      <router-link tag="div" to='/User'>
        <div class="iconfont icon-addressbook_fill"></div>
        <span>我的</span>
      </router-link>
    </div>
  </div>

</template>

<script>
export default {
  // name:'NavBar',
  data() {
    return {};
  }
  // 改为vue自带
  /*   methods: {
   active(event, value) {
      this.$router.push(value);
      // 找到父节点下的所有 li 标签
      let oDiv = event.currentTarget.parentNode.getElementsByTagName("div");
      // 遍历并去除所有li标签的 active 样式
      for (let index = 0; index < oDiv.length; index++) {
        const element = oDiv[index];
        element.classList.remove("div-active");
      }
      // event.currentTarget 当前函数作用的节点
      event.currentTarget.classList.add("div-active");
    }
  },
  mounted() {
      document.getElementsByClassName('ul')[0].getElementsByTagName('div')[0].classList.add('div-active');
  }
  */
};
</script>

<style scoped>
#NavBar {
  height: 10%;
  margin-top: 1px;
  color: #ffffff;
}
.ul {
  display: flex;
  justify-content: space-between;
  background-color: #313131;
  text-align: center;
  height: 100%;
  align-items: center;
  padding-left: 10%;
  padding-right: 10%;
}
.ul div {
  font-size: 1rem;
}
.ul > div > div {
  font-size: 2rem;
}
/* .div-active {
  color: #fb7d3f;
} */
.router-link-active {
  color: #fb7d3f;
}
</style>